<template>
  <px-dialog v-model="visible" title="添加题目" width="1200" @close="cancel">
    <div class="flex-center">
      <div v-loading="treeLoading" class="left-content">
        <div class="tree-title">
          <span>题目分类</span>
        </div>
        <div class="tree-search">
          <px-input v-model="treeSearchVal" placeholder="请输入" :prefix-icon="Search" clearable @change="getTreeData" />
        </div>
        <div class="tree-bar">
          <px-scrollbar>
            <px-tree
              ref="treeRef"
              :data="treeData"
              node-key="id"
              default-expand-all
              highlight-current
              :current-node-key="currentNode"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
            />
          </px-scrollbar>
        </div>
      </div>
      <div class="right-content">
        <px-form ref="formRef" :model="queryParams" :inline="true" class="custom-form-ui search-form">
          <px-form-item label="题目类型" prop="questionType">
            <px-select v-model="queryParams.questionType" style="width: 260px" placeholder="请选择题目类型" clearable>
              <px-option v-for="item in questionTypeList" :key="item.value" :label="item.name" :value="item.value" />
            </px-select>
          </px-form-item>
          <px-form-item label="题目名称" prop="questionName">
            <px-input v-model="queryParams.questionName" style="width: 260px" placeholder="请输入题目名称" clearable />
          </px-form-item>
          <div class="search-form-btn">
            <px-button type="primary" @click="handleQuery">查询</px-button>
            <px-button @click="resetQuery">重置</px-button>
          </div>
        </px-form>
        <div v-loading="loading" class="table-content">
          <px-table height="400" :data="tableData" size="small" border class="common-table" @selection-change="handleSelect">
            <px-table-column type="selection" width="55" />
            <px-table-column type="index" label="序号" fixed width="55" align="center" />
            <px-table-column prop="name" label="题目名称" min-width="120" show-overflow-tooltip>
              <template #default="scope">
                <span v-html="scope.row.name" />
              </template>
            </px-table-column>
            <px-table-column prop="typeName" label="题目类型" min-width="120" show-overflow-tooltip />
            <px-table-column prop="score" label="分值" min-width="120" show-overflow-tooltip />
            <px-table-column prop="updateTime" label="更新时间" min-width="120" show-overflow-tooltip />
            <px-table-column prop="updateByName" label="更新人" min-width="120" show-overflow-tooltip />
          </px-table>
          <pagination
            v-show="total > 0"
            v-model:page="pageNum"
            v-model:limit="pageSize"
            class="table-pagination"
            :total="total"
            @pagination="handleQuery"
          />
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <px-button @click="cancel">取消</px-button>
        <px-button type="primary" @click="save">确定</px-button>
      </span>
    </template>
  </px-dialog>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, nextTick, watch, computed } from "vue";
import { Search } from "@px-ui/icons-vue";
import { getQuestionCategoryListAPI, getQuestionListAPI, saveQuestionAPI, deleteQuestionAPI } from "@/api/knowledge/examManage";
import { PxMessage, PxMessageBox } from "px-ui";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(["update:visible", "save"]);

const visible = computed({
  get: () => props.visible,
  set: val => emits("update:visible", val)
});

const formRef = ref(null);
const treeRef = ref(null);

const state = reactive({
  treeLoading: false,
  treeData: [],
  treeSearchVal: "",
  currentNode: "0",
  queryParams: {
    questionType: "",
    questionName: ""
  },
  questionTypeList: [
    {
      name: "单选",
      value: "S"
    },
    {
      name: "多选",
      value: "M"
    },
    {
      name: "判断",
      value: "T"
    }
  ],
  loading: false,
  tableData: [],
  total: 1,
  pageNum: 1,
  pageSize: 20,
  selectedTableData: []
});
const { treeLoading, treeData, treeSearchVal, currentNode, queryParams, questionTypeList, loading, tableData, total, pageNum, pageSize } =
  toRefs(state);

onMounted(() => {
  getTreeData();
});

watch(treeSearchVal, val => {
  treeRef.value.filter(val);
});

const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};

const getTreeData = async () => {
  try {
    state.treeLoading = true;
    const params = {
      size: 9999,
      current: 1,
      name: state.treeSearchVal
    };
    const res = await getQuestionCategoryListAPI(params);
    state.treeData = res.records.map(item => {
      return {
        id: item.categoryId,
        label: item.category,
        children: []
      };
    });
    nextTick(() => {
      state.currentNode = res.records[0].id;
      treeRef.value.setCurrentKey(res.records[0].id);
      handleQuery();
    });
  } catch (err) {
    console.log(err);
  } finally {
    state.treeLoading = false;
  }
};

// 点击树节点
const handleNodeClick = (data, node, obj) => {
  state.currentNode = data.id;
  handleQuery();
};

// 查询
const handleQuery = async () => {
  try {
    state.loading = true;
    const params = {
      categoryId: state.currentNode,
      questionType: state.queryParams.questionType,
      questionName: state.queryParams.questionName,
      size: state.pageSize,
      current: state.pageNum
    };
    const res = await getQuestionListAPI(params);
    state.tableData = res.records;
    state.total = res.total;
  } catch (err) {
    console.log(err);
  } finally {
    state.loading = false;
  }
};

// 重置
const resetQuery = () => {
  formRef.value.resetFields();
  handleQuery();
};

const handleSelect = val => {
  state.selectedTableData = val;
};

const cancel = () => {
  emits("update:visible", false);
};
const save = () => {
  emits("update:visible", false);
  emits("save", state.selectedTableData);
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/knowledge/examManage/scss/common.scss");

.left-content {
  width: 316px;
  height: 100%;
  border: 1px solid #dfdfdf;
  border-radius: 4px;

  .tree-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 0;
    font-size: 14px;
    font-weight: bold;
    color: rgb(0 0 0 / 80%);
  }

  .tree-search {
    padding: 8px;
  }

  .tree-bar {
    width: 100%;
    height: 500px;
    overflow-y: auto;
  }
}

.right-content {
  width: calc(100% - 316px);
  height: 100%;
  padding-left: 18px;
}
</style>
